<style>
    .layui-table-cell .layui-table-sort {
        display: none;
    }

    .lay-query-box .query-lt {
        width: 90%;
    }

    .layui-table-view .layui-table-tool-self {
        display: flex;
        justify-content: flex-end;
        position: initial;
        margin-top: 12px;
    }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label">产品类别：</label>
                                    <div class="layui-input-inline">
                                        <input id="productTypeId" type="hidden" name="productTypeId">
                                        <div id="productType"></div>
                                    </div>
                                </div>
                                <!-- 客户名称 -->
                                <div class="layui-inline">
                                    <label class="layui-form-label">客户名称：</label>
                                    <div class="layui-input-inline">
                                        <select id='customerId' name="customerId"
                                                lay-filter="reviewPostId"
                                                class="common-select-search">
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">客户产品编码：</label>
                                    <div class="layui-input-inline">
                                        <input name="customerProCode" id="customerProCode" class="layui-input"
                                               type="text"
                                               placeholder="请输入产品编码" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">产品状态状态：</label>
                                    <div class="layui-input-inline">
                                        <select name="productStatus" lay-filter="productStatus"
                                                class="common-select-search">
                                            <option value="">状态</option>
                                            <option value="0">待规划</option>
                                            <option value="1">工程规划中</option>
                                            <option value="2">已定型</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">客户产品图号：</label>
                                    <div class="layui-input-inline">
                                        <input name="customerProFigure" id="customerProFigure" class="layui-input"
                                               type="text"
                                               placeholder="请输入图号" autocomplete="off"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">交货时间：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="givenStartTimed" placeholder="交货时间">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">交货截止时间：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="givenEndTime" name="givenEndTime" class="layui-input"
                                               placeholder="交货截止时间">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">创建时间：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="createTime" name="createTime" class="layui-input"
                                               placeholder="创建时间">
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog"
                                            lay-submit layui-form-keyDownSearch="true">查询
                                    </button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lay-btn-rows">
                    <div class="lay-btn-box">
                        <div class="lay-btn-lt">
                            <button id="productPlanningAdd" type="button" class="layui-btn icon-btn color-reseda">添加产品信息</button>
                        </div>
                        <div class="lay-btn-rt">

                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <div class="table-bor">
                <table class="layui-table" id="productPlanningTableInfo" lay-filter="productPlanningTableInfo"></table>
            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="productPlanningTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="planning">产品规划</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="drawing">图纸</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancellation">作废</a>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'laytpl', 'tableTreeDj', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;
        var config = layui.config;
        var admin = layui.admin;
        var tableTree = layui.tableTreeDj;

        laydate.render({
            elem: '#givenStartTimed'
            ,format:"yyyy-MM-dd"
            ,range: "至"
        });


        laydate.render({
            elem: '#givenEndTime'
            ,format:"yyyy-MM-dd"
            ,range: true
        });

        laydate.render({
            elem: '#createTime'
            ,format:"yyyy-MM-dd"
            ,range: true
        });

        // 渲染表格
        var insTb = table.render({
            id: '#productPlanningTableInfo',
            elem: '#productPlanningTableInfo',
            url: config.base + 'enterprise/product/admin/planning/productPlanning/list',
            page: true,
            toolbar: true,
            defaultToolbar: ["filter"],
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: '序号', fixed: 'left'}
                ,{field: 'cusProductCode', title: '客户产品编码', fixed: 'left',width: 150}
                ,{field: 'cusProductName', title: '客户产品名称', fixed: 'left',width: 150}
                ,{field: 'customerCode', sort: true, title: '客户代码',width: 150}
                ,{field: 'cusProductFigure', sort: true, title: '客户产品图号',width: 150}
                ,{field: 'productNature', sort: true, title: '性质'}
                ,{field: 'assemblyNature', sort: true, title: '属性'}
                ,{field: 'cusProductType', sort: true, title: '物资类别'}
                ,{field: 'orderCode', sort: true, title: '所属订单编号',width: 150}
                ,{field: 'givenPlanningTime', sort: true, title: '计划交货时间',width: 160}
                ,{field: 'productStatus', sort: true, title: '状态'}
                // ,{field: 'creator', sort: true, title: '创建人'}
                // ,{field: 'createTime', sort: true, title: '创建时间',width: 160}
                ,{align: 'center', toolbar: '#productPlanningTableBar', title: '操作', width: 320}
            ]],
            done: function (res, curr, count) {
                //移除按钮
                var menuButton = config.getMenuButton(location.hash);
                console.log("menuButtton",menuButton);
                if(menuButton.indexOf("搜索") == -1){
                    $('.layui-form.toolbar').remove();
                }
                if(menuButton.indexOf("修改") == -1){
                    $("[lay-event='edit']").remove();
                }
                if(menuButton.indexOf("删除") == -1){
                    $("[lay-event='del']").remove();
                }
            }
        });

        //初始化产品类别
        admin.initDataSelectTree(true, 'enterprise/product/admin/productType/getTreeData', {limit: 99999}, "productType", null, "产品类别", "productTypeId", function (row) {
            $("input[name='productTypeId']").val(row.arr[0].value)
        });

        //部门列表
        // admin.initDataSelectTree(true, 'user/admin/role/getTreeData', null, 'departmentSearchClaim', null, "部门", "departmentSearchClaimId", function (data) {
        //     // 获取部门ID
        //     let departmentId = data.change[0].value;
        //     //赋值部门id
        //     $('#departmentSearchClaimId').val(data.change[0].value);
        //     $('#reviewPostId').empty();
        //     //部门下的岗位列表
        //     admin.initDataSelect("user/admin/role/getPostData", {roleId: departmentId}, "reviewPostId", null, "岗位", null, null);
        // });

        //渲染下拉
        form.render('select');

        // 工具条点击事件
        table.on('tool(productPlanningTableInfo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'detail') { //详情
                showDetailModel(data, "1");
            } else if (obj.event === 'cancellation') { //作废
                console.log("作废...");
            } else if(obj.event === 'planning'){ //产品规划
                console.log("产品规划...");
            }else if(obj.event === 'drawing'){ //图纸
                console.log("图纸...");
            }
        });


        //监听排序
        table.on('sort(productPlanningTableInfo)', function (obj) {
            table.reload('productPlanningTableInfo', {
                initSort: obj
                , where: {
                    sort: obj.field
                    , order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            console.log("data", data);
            insTb.reload({where: data.field, page: {curr: 1}}, 'data');
        });

        // 重置搜索
        form.on('submit(resets)', data => {
            $(".lay-header").find('select').val("");
            $(".lay-header").find('input').val("");
            this.$refs.elTree.setCheckedKeys([]);
            let field = data.field;
            for (let key in field) {
                field[key] = ''
            }
            insTb.reload({where: field, page: {curr: 1}}, 'data');
        });

        // 添加按钮点击事件
        $('#productPlanningAdd').click(function () {
            showEditModel();
        });

        // 显示编辑弹窗
        function showEditModel() {
            let title = "添加产品信息(创建产品SKU信息)";
            admin.formOpen({
                type: 1,
                area: ['1380px', '90%'],
                offset: ['80px', '348px'],
                style: 'font-size: 20px;',
                title: title,
                path: 'components/product/planning/productPlanning_Add_from.html',
                finish: function () {
                    table.reload('productPlanningTableInfo', {});
                }
            });
        }


        //显示详情
        function showDetailModel(data) {
            admin.putTempData("planningData", data ? data : null);
            //展开详情页面
            let title = "产品详情";
            admin.formOpen({
                type: 1,
                area: ['1480px', '92%'],
                offset: ['80px', '348px'],
                style: 'font-size: 20px;',
                title: title,
                path: 'components/product/planning/productPlanning_detail_from.html',
                finish: function () {
                    table.reload('productPlanningTableInfo', {});
                }
            });
        }
    });
</script>